<template>
  <div>
    <div class="mui-numbox" data-numbox-min="1">
      <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
      <input
        class="mui-input-numbox"
        type="number"
        :value="carcountinfo"
        ref="numbox"
        @change="getspnumbox"
        readonly
      >
      <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>
  </div>
</template>
<script>
import mui from "../../mui/js/mui.min.js";
export default {
  data() {
    return {};
  },
  mounted() {
    mui(".mui-numbox").numbox(); //初始化
  },
  methods: {
    getspnumbox() {
      //   console.log(this.carcountinfo);
      //   console.log(this.$refs.numbox.value);
      // console.log(this.shopcarid); //添加商品的id和数量

      //同步数据到状态管理
      var goodsnumbox = {
        id: this.shopcarid,
        count: this.$refs.numbox.value
      };
      // console.log(goodsnumbox);
      this.$store.commit("changnumbox", goodsnumbox);
    }
  },
  //接受父传值
  props: ["carcountinfo", "shopcarid"]
};
</script>
<style scoped>
.mui-numbox {
  width: 95px;
  height: 30px;
  padding: 0 30px;
}
.mui-numbox [class*="numbox-btn"],
.mui-numbox [class*="btn-numbox"] {
  width: 30px;
  font-size: 16px;
}
</style>
